<!--
* @author wn
* @date 2022/11/09 11:17:12
* @description: 主页 布局 入口
!-->
<template>
	<div class="common-layout">
		<el-container>
			<!-- width="auto" .el-menu:not(.el-menu--collapse) -->
			<el-aside width="auto">
				<app-aside />
			</el-aside>
			<el-container>
				<!-- 顶部通栏 -->
				<el-header>
					<app-header />
				</el-header>
				<!-- 内容区域  二级路由 -->
				<el-main>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>
<script setup>
import { watch, ref } from 'vue'
import { useRoute } from 'vue-router'

// echarts 路由下  main 没有 padding
const padding = ref('20px')
const route = useRoute()
watch(
	() => route.path,
	newValue => {
		padding.value = newValue === '/echarts' ? '0px' : '20px'
	},
	{ immediate: true }
)
</script>
<style scoped lang="scss">
.el-header {
	background-color: #333;
}
.el-main {
	padding: v-bind(padding);
}
</style>
